import { createUseStyles } from "react-jss";
// 返回一个自定义的hook
const useStyles = createUseStyles({
  box: {
    backgroundColor: "lightblue",
    width: "300px",
  },
  title: {
    fontSize: "20px",
    color: "red",
    "&:hover": {
      color: (props) => props.color,
    },
  },
  // list: {
  //   "& a": {
  //     fontSize: "16px",
  //     color: "#000",
  //   },
  // },
  list: (props) => {
    return {
      "& p": {
        fontSize: props.size + "px",
        color: "red",
      },
    };
  },
});

export default function Demo() {
  const { box, title, list } = useStyles({
    size: 14,
    color: "orange",
  });
  function handle() {
    console.log("ok");
  }
  return (
    <>
      <nav className={box}>
        <h1 className={title}>我是标题</h1>
        <div className={list}>
          <p>使用react-jss</p>
          <p>避免样式冲突</p>
        </div>
      </nav>
      <div>
        <button onClick={handle}>按钮</button>
      </div>
    </>
  );
}
